<template>
  <view class="card-list">
    <view class="header-content">
      <text>{{ props.manufacturerContact || '未知' }}</text>
      <text>{{ props.customerId || '未知' }}</text>
    </view>
    <view class="main-content">
      <h4>{{ props.terminalName || '未知1' }}</h4>
      <p :class="props.designType">{{ props.designType || '未知' }}</p>
    </view>

    <view class="main-floor">
      <view class="floot-svg">
        <image src="@/static/svg/phone.svg" v-show="props.mainFloorSvg == '测量单'"></image>
        <image src="@/static/svg/money.svg" v-show="props.mainFloorSvg == '核算单'"></image>
        <text v-show="props.terminalPhone">{{ props.terminalPhone || '未知' }}</text>
        <text v-show="props.mainFloorSvg == '核算单'">元</text>
      </view>
      <p class="floor-date" v-show="props.surveyDate">{{ props.surveyDate || '未知' }}</p>
    </view>
    <slot></slot>
  </view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { defineProps } from 'vue'

const props = defineProps({
  manufacturerContact: {
    type: String,
    required: true,
  },
  customerId: {
    type: [String, Number],
    required: true,
  },
  designType: {
    type: String,
    required: true,
  },

  mainFloorSvg: {
    type: String,
    default: '测量单',
  },
  terminalPhone: {
    type: [String, Number],
    required: true,
  },
  surveyDate: {
    type: String,
    required: true,
  },
  terminalName: {
    type: String,
    required: true,
  },
})

onLoad(() => {
  // console.log(props)
})
</script>

<style lang="scss" scoped>
@import '@/static/style/index.scss';

.card-list {
  padding: 24rpx 32rpx;
  width: 686rpx;
  box-sizing: border-box;
  @include flex($justify: space-between, $flex-column: column);
  background-color: #ffffff;
  border-radius: 16rpx;
  border: 1rpx solid #e5e6eb;
  margin-bottom: 16rpx;

  .header-content,
  .main-content,
  .main-floor {
    @include flex($justify: space-between);
    color: #86909c;
    font-size: 24rpx;
    font-weight: 400;
  }

  .main-content {
    margin: 10rpx 0;

    h4 {
      color: #1d2129;
      font-size: 32rpx;
    }

    p {
      @include flex($justify: center, $align: center);
      padding: 0 8rpx;
      border-radius: 10rpx;
      min-width: 97rpx;
    }

    .待设计,
    .未下单,
    .待核算,
    .待上传安装图片,
    .待上传拆除照片 {
      color: #165dff;
      background-color: #e8f3ff;
    }

    .已核算,
    .已下单,
    .审核通过,
    .已通过 {
      color: #00b42a;
      background-color: #e8ffea;
    }

    .待审核 {
      color: #ff7d00;
      background-color: #fff7e8;
    }

    .驳回 {
      color: $btn-error-color;
      background-color: $btn-error-bg;
    }
  }

  .main-floor {
    .floot-svg {
      @include flex($align: center);

      image {
        width: 28rpx;
        height: 28rpx;
      }

      text {
        color: #1d2129;
      }
    }
  }

  .btn-install-order-list {
    margin-top: 20rpx;

    button {
      height: 56rpx;
      @include flex($justify: center, $align: center);
      border: none;
    }

    .btn-flex {
      @include flex($justify: space-between, $align: center);

      .接单 {
        background-color: #165dff;
        color: #fff;
      }

      button {
        width: 291rpx;
      }
    }

    .进行中 {
      background-color: #e8f3ff;
      color: #165dff;
    }

    .已拒接,
    .拒接 {
      background-color: #ffece8;
      color: #f53f3f;
    }

    .已完工 {
      background-color: #e8ffea;
      color: #00b42a;
    }

    .已超时 {
      background-color: #fff7e8;
      color: #ff7d00;
    }

    .row-btn {
      width: 100%;
    }
  }
}
</style>
